import { useSearchParams } from "react-router-dom"

/**
 * 返回页面url中，指定键的参数值
 */
export const useUrlQueryParam = <K extends string>(keys: K[]) => {
  const [searchParams, setSearchParams] = useSearchParams()
  return [
    keys.reduce((pre, key) => {
      // 此处的[key]为变量，不加[]将表示为字符串
      return {...pre, [key]: searchParams.get(key) || '' }
    }, {} as { [key in K]: string }),
    setSearchParams
  ] as const
  // 在ts中tuple为数据类型不统一的数组，但是ts会将[]自动认为是数组，如果是数组就必须类型统一
  // 因此无论是[]中有哪些数据类型都会自动用|链接，这样[]内的数据类型便会统一，为了避免这个情况，在后面+as const
}